<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XX酒店后台管理系统 客房管理</title>
    <link rel="stylesheet" href="../bootstrap-3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../iconfont/amend、delete、add、search/iconfont.css">
    <link rel="" href="../bootstrap-3.4.1/fonts/glyphicons-halflings-regular.eot">
    <script src="../jQuery/jquery-3.6.0.min.js"></script>
    <script src="../bootstrap-3.4.1/js/bootstrap.min.js"></script>
    <script src="../JavaScript/dataSaveAndGet.js"></script>
    <!-- <script src="../JavaScript/initializationData.js"></script> -->
    <!-- <link rel="stylesheet" href="../css/whn/guestRoom.css"> -->
    <!-- <script src="../JavaScript/whn/initializationData.js"></script> -->
    <link rel="stylesheet" href="../css/whn/gonggao.css">
    <style>
        /* main>section {
            width: calc(100%-10%);
        } */

        /* #boxm>.navbar-form.navbar-left {
            padding: 50px;
            box-sizing: border-box;
        } */

        #fenye {
            /* margin-left: 500px; */
            text-align: center;
            /* background-color:  */
            /* display: none; */
            /* color: red; */
            /* opacity: 0; */
            /* background-color: transparent; */
            /* border: none; */
        }
    </style>
</head>

<body class="clear">

    <header class="clear">
        <p>XX酒店后台管理系统</p>
        <div class="portrait clear">
            <!-- 头像 -->
            <div>
                <img src="../images/老板.webp" alt="">
            </div>
            <div id="quit">
                <p>工号:<span class="jobId"></span> &nbsp;欢迎你!
                </p>
                <button>退出<span class="iconfont icon-tuichu"></span></button>
            </div>
        </div>
    </header>
    <!-- 主导航 -->
    <nav class="navbar navbar-default" id="mianNav">
        <div class="container-fluid">
            <!-- 主导航选项 -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class=""><a href="./guestRoom.html">客房管理</a></li>
                    <li class=""><a href="./reserve.html">预定管理</a></li>
                    <li class=""><a href="./crm.html">房客管理</a></li>
                    <li class=""><a href="./orderForm.html">订单管理</a></li>
                    <li class=""><a href="./finance.html">财务管理</a></li>
                    <li class=""><a href="./staffManagement.html">员工管理</a></li>
                    <li class=""><a href="./personinMess.html">个人信息</a></li>
                    <li class="mianActive"><a href="./gonggao.html">公告</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <main class="clear">

        <section>
            <!-- 二级导航条 -->
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar">1</span>
                            <span class="icon-bar">2</span>
                            <span class="icon-bar">3</span>
                        </button>
                        <a class="navbar-brand">公告管理</a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active"><a>所有公告</a></li>
                            <!-- <li class=""><a>最新公告</a></li> -->

                        </ul>

                    </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </nav>
            <!-- 导航搜索 -->
            <div id="boxm">
                <form class="navbar-form navbar-left">
                    <div class="form-group" id="man">
                        <input type="text" id="biaoti" class="form-control" placeholder="请输入要搜索的标题">
                    </div>

                    <div class="form-group" id="nan">
                        <input type="text" id="leirong" class="form-control" placeholder="请输入要搜索的内容">
                    </div>
                    <button class="btn btn-default" id="sousuo">搜索</button>
                    <button class="btn btn-default" id="addMsg">发布新公告</button>
                </form>
                <!-- 内容头部 -->
                <table class="table table-striped ">
                    <thead>
                        <tr>

                            <th>公告标题</th>
                            <th>公告内容</th>
                            <th>发布人</th>
                            <th>时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="wahaha">

                    </tbody>

                </table>
                <nav aria-label="Page navigation" id="fenye">
                    <ul class="pagination">
                        <li id="hun">
                            <a aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>

                        <li id="Next">
                            <a aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>

            </div>
        </section>

    </main>
    <!-- 添加公告弹框 -->


    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加公告信息</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="exampleInputEmail1">标题</label>
                            <input type="text" class="form-control" id="wenhaonan2">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">内容</label>
                            <input type="text" class="form-control" id="wenhaonan">
                        </div>


                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirm">确认发布</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 删除？、 -->


    <div class="modal fade" id="delhint" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">删除提示</h4>
                </div>
                <div class="modal-body">
                    是否确认删除
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="qwer">确认删除</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        let loginUser = {
            id: 1, jobNumber: 10001, password: '12345', userName: '张一', sex: '男', Birthdate: '1990/12/12',
            tel: '133xxxxx', headPortrait: '../images/老板.webp', AccessLevel: 0, jobTitle: '管理员'
        }
        //   跳转之前，将登录者存进去
        saveData('loginUser', loginUser)
        //点击二级菜单
        $('main .navbar-nav>li').on('click', function () {
            //设置自身为选中状态并清除其他选项的选中状态
            $(this).addClass('active').siblings().removeClass('active')
        })
    </script>
    <script>
        let xiao = 1  /*  当前页 */
        let da = 0  /*  装最大页数 */
        let dashuju = getData('dashuju')
        // 取相应的数据
        let shuju = getData('dashuju')
        let renshuju = getData('staff')
        let denglv = getData('loginUser')
        // console.log(shuju);
        // 渲染分页按钮
        function yemian() {
            $('.kun').remove()
            dashuju = getData('dashuju')
            let pageNum = Math.ceil(dashuju.length / 10)
            da = pageNum
            // console.log(pageNum);
            for (let i = 1; i <= pageNum; i++) {

                $('#Next').before(`<li class='kun'><a >${i}</a></li>`)
            }
        }
        yemian()
        // 给每一个添加点击事件
        let start
        let end
        $('.pagination').on('click', '.kun', function () {
            // console.log($('.kun'));

            let bubu = $(this).text()
            kaka(bubu)
        })



        // 渲染数据
        function kaka(i) {
            dashuju = getData('dashuju')
            shuju = getData('dashuju')
            $('#wahaha').html('')
            let start = (parseInt(i) - 1) * 10   /* 起始 */
            let end = start + 10    /*  终止 */
            // 最后一页判断
            xiao = i
            if (i == da) {
                end = dashuju.length    /* 最后一项的下标 */
            }
            for (let i = start; i < end; i++) {


                let wowo = ''
                // 通过id找人  叫什么
                for (let j = 0; j < renshuju.length; j++) {
                    if (renshuju[j].id == shuju[i].nage) {
                        wowo = renshuju[j].userName
                    }
                }

                let htmlStr = `
              <tr>
                   <td style='display: none;'>${shuju[i].id}</td>
                    <td>${shuju[i].tiele}</td>
                    <td>${shuju[i].content}</td>
                    <td>${wowo}</td>
                    <td>${shuju[i].date}</td>
                    <td >
                     <button style='color: red;   background-color: transparent; border: none;'  class="del" title="删除" ><span class="iconfont icon-ziyuanxhdpi "></span></button>
                     </td>
                  
                </tr>
              
              
              `
                $('#wahaha').append(htmlStr)

            } $('.kun').removeClass('active')
            $('.kun').eq(xiao - 1).addClass('active')
        }


        // 向左

        $('#hun').on('click', function () {
            // console.log(1235);
            console.log(xiao);
            if (Number(xiao) >= 2) {
                // console.log(111);
                // $('.kun').eq(xiao - 2).click()
                // xiao--
                kaka(xiao - 1)
            }
        })
        // 向右
        $('#Next').on('click', function () {
            // console.log(1235);
            if (xiao < da) {
                // $('.kun').eq(xiao).click()
                // xiao++
                kaka(xiao + 1)
            }
        })
        kaka(1)
        $('#addMsg').click(function () {
            console.log(123);
            /* 让模态框显示 */
            event.preventDefault()
            $('#myModal1').modal('show')

        })
        $('#confirm').click(function () {
            // 获取类容
            let clun = {
                content: $('#wenhaonan').val(),
                date: getTime(),
                id: shuju[shuju.length - 1].id + 1,
                nage: denglv.id,
                tiele: $('#wenhaonan2').val(),
            }

            // 存数据

            shuju.push(clun)
            // 覆盖数据
            delData('dashuju')
            saveData('dashuju', shuju)

            shuju = getData('dashuju')

            // 弹框消失
            $('#myModal1').modal('hide')
            yemian()
            // kaka(xiao)
            // 刷新当前页面数据

            $('.kun').eq(da - 1).click()

        })


        let yuyu = null
        $('#wahaha').on('click', '.del', function () {
            // console.log(123);
            /* 让模态框显示 */
            yuyu = $(this).parents('tr').children('td').eq(0).text()
            // console.log(yuyu);
            event.preventDefault()
            $('#delhint').modal('show')

        })
        //    删除
        $('#qwer').on('click', function () {
            //    console.log(123);

            let op = yuyu
            // console.log(op);
            for (let i = 0; i < dashuju.length; i++) {
                if (op == dashuju[i].id) {
                    dashuju.splice(i, 1);
                    saveData('dashuju', dashuju)
                    break;
                }
            }
            $('.kun').eq(xiao - 1).click()
            yemian()  // 删除后刷新


            console.log($('tbody tr').length);
            if ($('tbody tr').length == 0 && xiao != 1) {
                $('.kun').eq(xiao - 2).click()
            } else {
                $('.kun').eq(xiao - 1).click()

            }
        })
        //  搜索
        let zhung = []
        $('#sousuo').on('click', function () {
            
            event.preventDefault()
            let pt = $('#biaoti').val()
            let pn = $('#leirong').val()
            console.log(pt);
            // let pt1 = $('#leirong').val()
            if(pn==''&&pt==''){
                
            }else{
                $('#wahaha').html('')
                if(pt!==''){
                    // console.log(pn);
                zhuang = []
                dashuju = getData('dashuju')
                for (let i = 0; i < dashuju.length; i++) {
                    if ((dashuju[i].tiele.indexOf(pt)) != -1) {
                        zhuang.push(dashuju[i])
                    }
                }
                console.log(zhuang);
                for (let i = 0; i < zhuang.length; i++) {
                    let hehe = ''
                    // 通过id找人  叫什么
                    for (let j = 0; j < renshuju.length; j++) {
                        if (renshuju[j].id == zhuang[i].nage) {
                            hehe = renshuju[j].userName
                        }
                    }
                    let htmlStr1 = `
                <tr>
                    <td style='display: none;'>${zhuang[i].id}</td>
                        <td>${zhuang[i].tiele}</td>
                        <td>${zhuang[i].content}</td>
                        <td>${hehe}</td>
                        <td>${zhuang[i].date}</td>
                        <td style='color: red;'>
                        <button style='color: red;   background-color: transparent; border: none;'  class="del" title="删除" ><span class="iconfont icon-ziyuanxhdpi "></span></button>
                        </td>
                    
                    </tr>
                `
                    $('#wahaha').append(htmlStr1)


                }
                // 渲染分页按钮
                function plpl() {
                    $('.kun').remove()
                    //  dashuju = getData('dashuju')
                    let pageNum1 = Math.ceil(zhuang.length / 10)
                    da = pageNum1
                    // console.log(pageNum);
                    for (let i = 1; i <= pageNum1; i++) {

                        $('#Next').before(`<li class='kun'><a >${i}</a></li>`)
                    }
                }
                plpl()
            }else if(pn !== ''){
                zhuang = []
                dashuju = getData('dashuju')
                for (let i = 0; i < dashuju.length; i++) {
                    if ((dashuju[i].tiele.indexOf(pn)) != -1) {
                        zhuang.push(dashuju[i])
                    }
                }
                console.log(zhuang);
                for (let i = 0; i < zhuang.length; i++) {
                    let hehe = ''
                    // 通过id找人  叫什么
                    for (let j = 0; j < renshuju.length; j++) {
                        if (renshuju[j].id == zhuang[i].nage) {
                            hehe = renshuju[j].userName
                        }
                    }
                    let htmlStr1 = `
                <tr>
                    <td style='display: none;'>${zhuang[i].id}</td>
                        <td>${zhuang[i].tiele}</td>
                        <td>${zhuang[i].content}</td>
                        <td>${hehe}</td>
                        <td>${zhuang[i].date}</td>
                        <td style='color: red;'>
                        <button style='color: red;   background-color: transparent; border: none;'  class="del" title="删除" ><span class="iconfont icon-ziyuanxhdpi "></span></button>
                        </td>
                    
                    </tr>
                `
                    $('#wahaha').append(htmlStr1)


                }
                // 渲染分页按钮
                function plpl() {
                    $('.kun').remove()
                    //  dashuju = getData('dashuju')
                    let pageNum1 = Math.ceil(zhuang.length / 10)
                    da = pageNum1
                    // console.log(pageNum);
                    for (let i = 1; i <= pageNum1; i++) {

                        $('#Next').before(`<li class='kun'><a >${i}</a></li>`)
                    }
                }
                plpl()
            }else if(pt!==''&&pn!==''){
                zhuang = []
                dashuju = getData('dashuju')
                for (let i = 0; i < dashuju.length; i++) {
                    if ((dashuju[i].tiele.indexOf(pn) != -1) &&(dashuju[i].content.indexOf(pt) != -1)) {
                        zhuang.push(dashuju[i])
                    }
                }
                console.log(zhuang);
                for (let i = 0; i < zhuang.length; i++) {
                    let hehe = ''
                    // 通过id找人  叫什么
                    for (let j = 0; j < renshuju.length; j++) {
                        if (renshuju[j].id == zhuang[i].nage) {
                            hehe = renshuju[j].userName
                        }
                    }
                    let htmlStr1 = `
                <tr>
                    <td style='display: none;'>${zhuang[i].id}</td>
                        <td>${zhuang[i].tiele}</td>
                        <td>${zhuang[i].content}</td>
                        <td>${hehe}</td>
                        <td>${zhuang[i].date}</td>
                        <td style='color: red;'>
                        <button style='color: red;   background-color: transparent; border: none;'  class="del" title="删除" ><span class="iconfont icon-ziyuanxhdpi "></span></button>
                        </td>
                    
                    </tr>
                `
                    $('#wahaha').append(htmlStr1)


                }
                // 渲染分页按钮
                function plpl() {
                    $('.kun').remove()
                    //  dashuju = getData('dashuju')
                    let pageNum1 = Math.ceil(zhuang.length / 10)
                    da = pageNum1
                    // console.log(pageNum);
                    for (let i = 1; i <= pageNum1; i++) {

                        $('#Next').before(`<li class='kun'><a >${i}</a></li>`)
                    }
                }
                plpl()
            }

            }
            
            
        })

        // 给每一个添加点击事件
        // let start
        // let end
        // $('.pagination').on('click', '.kun', function () {
        //     // console.log($('.kun'));

        //     let bubu = $(this).text()
        //     kaka(bubu)
        // })
      

        // 显示当前登录者头像及工号
        showHeadImgId()
        // 头部退出按钮
        $('#quit').find('button').click(function () {
            open('./login.html', '_self')
        })

        //显示当前登录者头像及工号
        function showHeadImgId() {
            let useData = getData('staff')
            let loginUser = getData('loginUser').jobNumber
            for (let i = 0; i < useData.length; i++) {
                if (useData[i].jobNumber == loginUser) {
                    $('.portrait').find('img').attr('src', useData[i].headPortrait)
                    $('#quit').find('.jobId').html(useData[i].jobNumber)
                }

            }
        }
    </script>
</body>

</html>